<template>
  <div id='star' class='w-full h-full bg-white'></div>
</template>

<script setup>
import { Chart } from '@antv/g2'
import { onMounted } from 'vue'
// 准备数据
const data = [
  { genre: '2023-10-25', sold: 100 },
  { genre: '2023-10-26', sold: 123 },
  { genre: '2023-10-27', sold: 156 },
  { genre: '2023-10-28', sold: 178 },
  { genre: '2023-10-29', sold: 120 },
  { genre: '2023-10-30', sold: 231 },
  { genre: '2023-10-31', sold: 256 },
]

// 主题颜色
const primaryColor = document.documentElement.style.getPropertyValue('--el-color-primary')

onMounted(() => {
  // 初始化图表实例
  const chart = new Chart({
    title: '近七日Star', // 标题
    type: 'view',
    container: 'star',
    autoFit: true, // 视图宽高自动撑满父容器
    axis: false,
    marginRight: '30',
  })


  chart
    .area() // 声明这是一个折线图
    .data(data) // 绑定数据
    .encode({ x: 'genre', y: 'sold' }) // 设置x轴和y轴对应的数据
    .encode('shape', 'smooth') // 平滑的
    .axis('y', { title: '' }) // 设置y轴的名称
    .style('fill', `linear-gradient(-90deg, white 0%, ${primaryColor} 100%)`)
    // 声明第一个 label
    .label({
      text: 'sold', // 指定绑定的字段
      style: {
        dy: -15, // 指定样式
      },
    })
    // 设置第一行内容，可以设置多个
    .tooltip(
      (d) => ({
        name: `Star数`,
        value: `${d.sold}`,
      }),
    )

  chart.render()
})
</script>
